import { Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  useEffect(() => {
    const canvas = new fabric.Canvas('c', {
      width: 1000,
      height: 1000
    })

    // 使用fabric的api加载图片
    fabric.Image.fromURL('/imgs/welcome-bg.png', img => {
      // 设置图片在画布中的位置
      img.top = 50
      img.left = 50
      // 将图片添加到画布中
      canvas.add(img)
    })
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>图片</Divider>
      <canvas id='c' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
